<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  
<style>
    div {
        border: 2px solid green;
    }
</style>
</head>
<body>
    <div class="container">
       <div class="row" >
          <div class="col-xs-6 col-sm-3" style="height:60px;"></div>
          <div class="col-xs-6 col-sm-3" style="height:120px;"></div>
    
          <div class="clearfix visible-xs" style="height:30px;"></div>
    
          <div class="col-xs-6 col-sm-3" style="height:80px;"></div>
          <div class="col-xs-6 col-sm-3" style="height:40px;"></div>
       </div>
    </div>
    
    </body>

</html>